<template>
  <div :id="id" style="width: 95%; height: 1000px;border:1px solid #ccc"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
      default: 'map1'
    }
  },
  mounted() {
    var chartDom = document.getElementById(this.id)
    var myChart = echarts.init(chartDom)
    var option

    myChart.showLoading()
    this.$http.get('http://127.0.0.1:3000/map').then((res) => {
      myChart.hideLoading()
      echarts.registerMap('China', res.data[0])
      myChart.setOption(
        (option = {
          title: {
            text: '全国米家店铺分布',
            subtext: 'Data from mi.com'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/> {c}家 '
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 10,
            max: 200,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              name: '全国大学院校分布',
              type: 'map',
              map: 'China',
              label: {
                show: true
              },
              zoom: 1, //当前视角的缩放比例
              roam: true, //是否开启平游或缩放
              scaleLimit: {
                //滚轮缩放的极限控制
                min: 1,
                max: 10
              },
              data: [
                { name: '北京市', value: 92 },
                { name: '天津市', value: 52 },
                { name: '河北省', value: 123 },
                { name: '山西省', value: 82 },
                { name: '内蒙古自治区', value: 54 },
                { name: '辽宁省', value: 114 },
                { name: '黑龙江省', value: 80 },
                { name: '上海市', value: 64 },
                { name: '江苏省', value: 167 },
                { name: '浙江省', value: 109 },
                { name: '安徽省', value: 121 },
                { name: '福建省', value: 89 },
                { name: '江西省', value: 106 },
                { name: '山东省', value: 153 },
                { name: '河南省', value: 156 },
                { name: '湖北省', value: 130 },
                { name: '广东省', value: 160 },
                { name: '海南省', value: 21 },
                { name: '湖南省', value: 21 },
                { name: '重庆市', value: 69 },
                { name: '四川省', value: 134 },
                { name: '贵州省', value: 75 },
                { name: '云南省', value: 82 },
                { name: '陕西省', value: 97 },
                { name: '甘肃省', value: 49 },
                { name: '青海省', value: 12 },
                { name: '吉林省', value: 12 },
                { name: '宁夏回族自治区', value: 20 },
                { name: '西藏自治区', value: 20 },
                { name: '新疆维吾尔自治区', value: 56 },
                { name: '广西壮族自治区', value: 85 },
                { name: '澳门特别行政区', value: 5 },
                { name: '香港特别行政区', value: 12 },
                { name: '台湾省', value: 8 }
              ],
              // 自定义名称映射
              nameMap: {
                'Central and Western': '中西区',
                Eastern: '东区',
                Islands: '离岛',
                'Kowloon City': '九龙城',
                'Kwai Tsing': '葵青',
                'Kwun Tong': '观塘',
                North: '北区',
                'Sai Kung': '西贡',
                'Sha Tin': '沙田',
                'Sham Shui Po': '深水埗',
                Southern: '南区',
                'Tai Po': '大埔',
                'Tsuen Wan': '荃湾',
                'Tuen Mun': '屯门',
                'Wan Chai': '湾仔',
                'Wong Tai Sin': '黄大仙',
                'Yau Tsim Mong': '油尖旺',
                'Yuen Long': '元朗'
              }
            }
          ]
        })
      )
    })
    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
</style>